<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米账号登录</title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .header{
                width: 1130px;
                height: 98px;
                margin: 0 auto;
            }
            .logo{
                width: 200px;
                height: 98px;
            }
            .logo a{
                display: block;
                width: 200px;
                height: 98px;
                background-image: url("mistore_logo.png");
                background-repeat: no-repeat;
                background-size: cover;
            }
            .middle{
                width: 100%;
                height: 588px;
                background-image: url("redmik30pro.jpg");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: top center;
                position: absolute;
                left: 0;
                top: 98px;
            }
            .layout{
                width: 410px;
                height: 556px;
                background-color: white;
                position: relative;
                left: 920px;
                top:32px;
            }
            .item{
                width: 410px;
                height: 500px;
                overflow: hidden;
            }
            .title{
                width: 410px;
                height: 32px;
                margin: 27px 0 24px;
                text-align: center;
            }
            .title1{
                color: #f56600;
                font-size: 24px;
                text-align: center;
                cursor: pointer;
            }
            .title2{
                text-align: center;
                font-size: 24px;
                color: #666;
                cursor: pointer;
            }
            .title2:hover{
                color:#f56600 ;
            }
            .line{
                width: 1px;
                height: 24px;
                margin: 0 35px 0 42px;
                border: 1px solid #e0e0e0;
            }
            .content{
                width: 348px;
                margin: 0 auto;
            }
            .input-list{
                width: 348px;
                height: 124px;
            }
            .input-list input{
                width: 316px;
                height: 20px;
                line-height: 22px;
                padding: 13px 16px 13px 14px;
                display: block;
                color: #4a4a4a;
                border: 1px solid #ddd7d7;
                outline: none;
                margin-bottom: 14px;
            }
            .btn{
                width: 348px;
                height: 50px;
                margin-top: 10px;
                margin-bottom: 14px;
            }
            .btn button{
                width: 348px;
                height: 50px;
                background-color: #ff6700;
                text-align: center;
                font-size: 14px;
                color: #fff;
                cursor: pointer;
                border: none;
            }
            .word{
                width: 348px;
                height: 20px;
            }
            .word1{
                color: #ff6700;
                font-size: 14px;
                text-align: center;
                cursor: pointer;
            }
            .word2{
                color: #757575;
                font-size: 14px;
                text-align: center;
                text-decoration: none;
                margin-left: 80px;
            }
            .word2:hover{
                color: #ff6700;
            }
            .word3{
                color: #757575;
                font-size: 14px;
                text-align: center;
            }
            .word4{
                color: #757575;
                font-size: 14px;
                text-align: center;
                text-decoration: none;
            }
            .word4:hover{
                color: #ff6700;
            }
            .word5{
                width: 348px;
                height: 30px;
                font-size: 14px;
                color: #b0b0b0;
                margin-top: 130px;
                text-align: center;
            }
            .icon{
                width: 348px;
                height: 37px;
                margin: 5px 55px;
            }
            .icon a{
                text-decoration: none;
            }
            .icon-type{
                width: 30px;
                height: 30px;
                margin: 0 12px;
                display: inline-block;
                border-radius: 50%;
            }
            .QQ-color{
                background-color: #0288d1;
            }
            .QQ{
                width: 18px;
                height:18px;
                float: left;
                margin: 5px 5px;
                background-image: url("icons_type.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: -19px 0;
                vertical-align: middle;
            }
            .weibo-color{
                 background-color: #d1150f;
             }
            .weibo{
                width: 18px;
                height:18px;
                float: left;
                margin: 5px 5px;
                background-image: url("icons_type.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: -38px 0;
                vertical-align: middle;
            }
            .alipay-color{
                 background-color: #0ae;
             }
            .alipay{
                width: 18px;
                height:18px;
                float: left;
                margin: 5px 5px;
                background-image: url("icons_type.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: -57px 0;
                vertical-align: middle;
            }
            .wechat-color{
                background-color: #00d20d;
            }
            .wechat{
                width: 18px;
                height:18px;
                float: left;
                margin: 5px 5px;
                background-image: url("icons_type.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position:-85px 0;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="logo">
                <a href="https://www.mi.com/"></a>
            </div>
        </div>
        <a href="https://www.mi.com">
            <div class="middle"></div>
        </a>

        <div class="layout">
            <div class="item">
                <div class="title">
                    <a class="title1">账号登录</a>
                    <span class="line"></span>
                    <a class="title2">扫码登录</a>
                </div>
                <div class="content">
                    <div class="input-list">
                        <input type="text" placeholder="邮箱/手机号码/小米ID">
                        <input type="password"placeholder="密码">
                    </div>
                    <div class="btn">
                        <button >登录</button>
                    </div>
                    <div class="word">
                        <span class="word1">手机短信登录/注册</span>
                        <a class="word2" href="https://cn.account.xiaomi.com/pass/register?callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Findex.html%26sign%3DMjM0MWU0NjBlOTU1YzY4NGQzOTc3MDk4N2M2MjQ5Y2ZiZTMxNTFlZQ%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">
                            立即注册
                        </a>
                        <span class="word3">|</span>
                        <a class="word4" href="https://account.xiaomi.com/pass/forgetPassword?callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Findex.html%26sign%3DMjM0MWU0NjBlOTU1YzY4NGQzOTc3MDk4N2M2MjQ5Y2ZiZTMxNTFlZQ%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">
                            忘记密码？
                        </a>
                    </div>
                    <div class="word5">
                        <span>-----------------其他方式登录------------------</span>
                    </div>
                    <div class="icon">
                        <a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=100284651&redirect_uri=https://account.xiaomi.com/pass/sns/login/load&state=STATE_383080" title="QQ登录">
                            <div class="icon-type QQ-color">
                                <i class="QQ"></i>
                            </div>
                        </a>
                        <a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=100284651&redirect_uri=https://account.xiaomi.com/pass/sns/login/load&state=STATE_383080" title="微博登录">
                            <div class="icon-type weibo-color">
                                <i class="weibo"></i>
                            </div>
                        </a>
                        <a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=100284651&redirect_uri=https://account.xiaomi.com/pass/sns/login/load&state=STATE_383080" title="支付宝登录">
                            <div class="icon-type alipay-color">
                                <i class="alipay"></i>
                            </div>
                        </a>
                        <a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=100284651&redirect_uri=https://account.xiaomi.com/pass/sns/login/load&state=STATE_383080" title="微信登录">
                            <div class="icon-type wechat-color">
                                <i class="wechat"></i>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
        </div>

    </body>
</html>